<% if (plugins.starlists) { %>
  <section>
    <h2 class="field">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm4 5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm0 5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path><path d="M13.314 4.918L11.07 2.417A.25.25 0 0111.256 2h4.488a.25.25 0 01.186.417l-2.244 2.5a.25.25 0 01-.372 0z"></path></svg>
      <%= plugins.starlists?.count ?? "" %> Star list<%= s(plugins.starlists?.count ?? 0) %>
    </h2>
    <div class="row">
      <section>
        <% if (plugins.starlists.error) { %>
          <div class="field error">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
            <%= plugins.starlists.error.message %>
          </div>
        <% } else { %>
          <% for (const {name, description, count, repositories, languages = null} of plugins.starlists.lists) { %>
            <div class="starlist">
              <h2 class="field">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
                <%= name %>
              </h2>
              <div class="count"><%= count %> repositor<%= s(count, "y") %></div>
              <div class="description"><%= description %></div>
              <% if (languages) { const width = 420 * (1 + large), rows = large ? [0, 1, 2, 3] : [0, 1] %>
                <div class="languages">
                  <div class="row">
                    <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
                      <mask id="languages-bar">
                        <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
                      </mask>
                      <rect mask="url(#languages-bar)" x="0" y="0" width="<%= languages.length ? 0 : width %>" height="8" fill="#d1d5da"/>
                      <% for (const {name, value, color, x, p} of languages) { %>
                        <rect mask="url(#languages-bar)" x="<%= x*width %>" y="0" width="<%= p*width %>" height="8" fill="<%= color ?? "#959DA5" %>"/>
                      <% } %>
                    </svg>
                  </div>
                  <div class="row">
                    <% for (const row of rows) { %>
                      <section>
                        <% for (const {name, value, color} of languages.filter((_, i) => i%rows.length === row)) { %>
                          <div class="field language details">
                            <div class="field">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= color ?? "#959DA5" %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                              <%= name %>
                            </div>
                            <small>
                              <div><%= f.percentage(value/count) %></div>
                              <div><%= f(value) %>★</div>
                            </small>
                          </div>
                        <% } %>
                      </section>
                    <% } %>
                  </div>
                </div>
              <% } %>
              <div class="repositories">
                <% for (const repository of repositories) { %>
                  <div class="row fill-width largeable-width-half">
                    <section class="repository">
                      <div class="field">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 5.75C4 4.784 4.784 4 5.75 4h4.5c.966 0 1.75.784 1.75 1.75v4.5A1.75 1.75 0 0110.25 12h-4.5A1.75 1.75 0 014 10.25v-4.5zm1.75-.25a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h4.5a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-4.5z"></path></svg>
                        <div class="name">
                          <span><%= repository.name %></span>
                          <span></span>
                        </div>
                      </div>
                      <div class="field description">
                        <%= repository.description %>
                      </div>
                      <div class="field infos">
                        <% if (repository.language?.name) { %>
                          <div class="language">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="#<%= repository.language.color ?? "959DA5" %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
                            <%= repository.language.name %>
                          </div>
                        <% } %>
                        <% if (Number.isFinite(repository.stargazers)) { %>
                          <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="11" height="11"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
                            <%= f(repository.stargazers) %>
                          </div>
                        <% } %>
                        <% if (Number.isFinite(repository.stargazers)) { %>
                          <div>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="11" height="11"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                            <%= f(repository.forks) %>
                          </div>
                        <% } %>
                      </div>
                    </section>
                  </div>
                <% } %>
              </div>
            </div>
          <% } %>
        <% } %>
      </section>
    </div>
  </section>
<% } %>